<template>
    <div>
        <div :id="chartName" class="box"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import * as echarts from 'echarts'
const props = defineProps<{
  chartName: string
}>()
const demo = () => {
  let myChart = echarts.init(document.getElementById(props.chartName))
  let num = 90
  let num1 = 80
  let num2 = 30
  let rose1 = `男   xxx人   ${(num / (num + num1 + num2)) * 100}%`
  let rose2 = `女   xxx人   ${(num1 / (num + num1 + num2)) * 100}%`
  let rose3 = `其他   xxx人   ${(num2 / (num + num1 + num2)) * 100}%`
  let option = {
    // title: {
    //   text: 'Nightingale Chart',
    //   subtext: 'Fake Data',
    //   left: 'center',
    // },
    // tooltip: {
    //   trigger: 'item',
    //   formatter: '{a} <br/>{b} : {c} ({d}%)',
    // },
    backgroundColor: '#ffffff32',

    legend: {
      left: 'center',
      top: '70%',
      data: [rose1, rose2, rose3],
      textStyle: {
        color: '#fff',
        fontSize: 13,
      },
      itemGap: 5,
      itemWidth: 10,
      itemHeight: 10,
    },

    series: [
      {
        name: 'Radius Mode',
        type: 'pie',
        radius: [0, 70],
        center: ['50%', '37%'],
        roseType: 'radius',
        // clockwise:false,
        itemStyle: {
          //   borderRadius: 7,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },

        clockwise: false,
        // minAngle: 15, //最小角度
        startAngle: 40, //起始角度
        data: [
          { value: 90, name: rose1 },
          { value: 80, name: rose2 },
          { value: 30, name: rose3 },
        ],
      },
    ],
  }

  myChart.setOption(option)
  window.addEventListener('resize', function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  })
}
onMounted(() => {
  demo()
})
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 200px;
  //   background: #fff;
}
</style>